<template>
	<view class="wap">
		<view class="title">
			<image :src="require('./static/img/logo.png')" mode=""></image>
			<view class="">
				续写微醺里的故事
			</view>
		</view>
		<view class="login">
			<button type="default" plain="true" @click="show">微信登录</button>
		</view>
		
		<view class="bg" v-if="auth">
			<view class="auth">
				<view class="auth_title">
					微信授权
				</view>
				<view class="auth_center">
					<image :src="require('./static/img/success.png')" mode=""></image>
					<view class="">微信授权成功</view>
					<view style="color: #999999;margin-top: 16rpx;margin-bottom: 64rpx;">授权绑定你的手机号码</view>
				</view>
				<view class="auth_footer">
					<button @click="show" plain="true">拒绝</button>
					<button style="color:#26DB70;" plain="true"  @getuserinfo="getuserInfo" open-type="getUserInfo">允许</button>
				</view>
			</view>
		</view>
	</view>	
</template>

<script>
	export default {
		data() {
			return {
				auth:false
			}
		},
		methods: {
			show(){
				this.auth = !this.auth
			},
			getuserInfo(){
				console.log(1)
				var _this=this;
				  _this.auth = !_this.auth
				  uni.login({
					provider: 'weixin',
					success: function (res) {
						// console.log(res)
						if(res.code){
							uni.getUserInfo({
								provider: 'weixin',
								success: function (infoRes) {
								  // console.log(infoRes);
								}
							 });
						}
					 
					}
				  });
			}
		}
	}
</script>

<style lang="scss" scoped>
.wap{
	padding: 162rpx 96rpx 0 96rpx;
	position: relative;
	.title {
		margin: 0 auto;
		margin-bottom: 160rpx;
		text-align:center;
		image{
			width: 128rpx;
			height: 128rpx;
			margin-bottom: 32rpx;
		}
		view{
			font-size: 30rpx;
			color: #999999;
			font-weight: 300;
			}
	}
	.login{
		width: 560rpx;
		line-height: 88rpx;
		text-align: center;
		font-size: 32rpx;
		background: #FEDD12;
		border-radius: 44rpx;
		button{
			border: 0;
			color: #FFFFFF;
		}
	}
	.bg{
		width: 100%;
		height: 100vh;
		background:rgba(0,0,0,0.6);
		position: absolute;
		top: 0;
		left: 0;
		// display: none;
		.auth{
			width: 558rpx;
			height: 538rpx;
			background: white;
			padding: 32rpx 0  26rpx 0;
			position: absolute;
			text-align: center;
			box-sizing: border-box;
			border-radius: 32rpx;
			top: 40%;
			left: 50%;
			transform: translate(-50%,-50%);
			
			.auth_title{
				font-size: 32rpx;
				font-weight: 400;
				padding-bottom: 32rpx;
				border-bottom: 1rpx solid #F3F3F3;
			}
			.auth_center{
				font-size: 32rpx;
				font-weight: 400;
				image{
					width: 100rpx;
					height: 100rpx;
					margin: 32rpx 0;	
				}
				
			}
			.auth_footer{
				padding: 0 118rpx 0 118rpx;
				border-top: 1rpx solid #F3F3F3;
				display:flex;
				justify-content: space-between;
				font-size: 32rpx;
				font-weight: 500;
				button{
					color: #999999;
					border: 0;
					padding: 0;
					margin: 0;
					
				}
			}
	}
	
	}
}


</style>
